<template>
    <div 
      :ref="chartRef"
      :style="{ width: width, height: height, border: bord, background: bgc }"
      class="chart_box">
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    props: {
      width: {
        type: String,
        default: "100%"
      },
      height: {
        type: String,
        default: "100%"
      },
      option: {
        type: Object,
        default: () => ({})
      },
      bgc: {
        type: String,
        default: 'linear-gradient(180deg, rgba(33, 88, 148, 0.10) 0%, #215894 100%)'
      },
      bord: {
        type: String,
        default: '1px solid rgba(21, 63, 109, 0.80)'
      }
    },
    data() {
      return {
        chartRef: 'chart',
        myChart: null
      };
    },
    mounted() {
      this.myChart = echarts.init(this.$refs[this.chartRef]);
      if (this.option) {
        this.myChart.setOption(this.option);
      }
      window.addEventListener("resize", this.handleResize);
    },
    watch: {
      option: {
        handler(newOption) {
          if (this.myChart) {
            this.myChart.setOption(newOption);
          }
        },
        deep: true
      }
    },
    methods: {
      handleResize() {
        if (this.myChart) {
          this.myChart.resize();
        }
      }
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.handleResize);
      if (this.myChart) {
        this.myChart.dispose();
      }
    }
  };
  </script>
  
  <style scoped>

  </style>
  